<template>
  <el-table size="small" v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
    <el-table-column prop="id" label="订单ID" min-width="175" header-align="center" align="center"></el-table-column>
    <el-table-column prop="memberUname" min-width="120" label="会员" header-align="center" align="center"></el-table-column>
    <el-table-column prop="memberPaymentMethod" min-width="100" label="收款方式" header-align="center" align="center">
      <template v-slot="scope">
        <el-tooltip class="box-item">
          <template #content>
            <span>{{ scope.row.paymentMethodDetail || "Loading" }}</span>
          </template>
          <el-link type="primary" @mouseenter="cellPaymentHoverHandle(scope.row)">{{ state.getDictLabel("platform_payment_methods", scope.row.memberPaymentMethod) }}</el-link>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="platformPaymentMode" min-width="100" label="平台渠道" header-align="center" align="center">
      <template v-slot="scope">
        {{ state.getDictLabel("platform_payment_mode", scope.row.platformPaymentMode) }}
      </template>
    </el-table-column>
    <el-table-column prop="platformPaymentName" min-width="100" label="付款账号" header-align="center" align="center"></el-table-column>
    <el-table-column prop="amount" label="订单金额" min-width="100" header-align="center" align="center"></el-table-column>
    <el-table-column prop="platformToFbRate" label="平台汇率" min-width="100" header-align="center" align="center"></el-table-column>
    <el-table-column prop="binanToFbRate" label="币安汇率" min-width="100" header-align="center" align="center"></el-table-column>
    <el-table-column prop="receiptAmount" label="实收金额" min-width="100" header-align="center" align="center"></el-table-column>
    <el-table-column prop="status" label="状态" min-width="100" header-align="center" align="center">
      <template v-slot="scope">
        <el-tooltip class="box-item">
          <template #content>
            <div style="max-width: 400px">
              <p v-if="scope.row.errMsg2">结果：{{ scope.row.errMsg2 || "" }}</p>
              <p>{{ scope.row.errMsg || "Loading" }}</p>
            </div>
          </template>
          <el-link type="primary" @mouseenter="cellErrorHoverHandle(scope.row)">
            <dict-label dict-type="member_sell_order_st" :dict-value="scope.row.status" :status="{ 1: 'info', 2: 'info', 4: 'warning', 5: 'danger' }"></dict-label>
          </el-link>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="createDate" width="155" label="创建时间" header-align="center" align="center"></el-table-column>
    <el-table-column prop="pushPaymentDate" width="155" label="提到渠道时间" header-align="center" align="center"></el-table-column>
    <el-table-column prop="finishDate" width="155" label="耗时" header-align="center" align="center">
      <template v-slot="scope">
        {{ calculateTimeDifferenceHandle(scope.row.createDate, scope.row.finishDate) }}
      </template>
    </el-table-column>
  </el-table>
  <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from "vue";
import useView from "@/hooks/useView";
import baseService from "@/service/baseService";
import { calculateTimeDifference2 } from "@/utils/utils";

const view = reactive({
  getDataListURL: "/order/membersellorder/page",
  getDataListIsPage: true,
  createdIsNeed: false,
  dataForm: {
    memberUname: ""
  }
});
const state = reactive({ ...useView(view), ...toRefs(view) });

const init = (row?: any) => {
  view.dataForm.memberUname = row.uname;
  state.getDataList();
};

const calculateTimeDifferenceHandle = (startTime: any, endTime: any) => {
  if (!startTime || !endTime) return "-";
  return calculateTimeDifference2(startTime, endTime);
};

// 获取支付卡详情
const getPaymentInfo = async (id: number) => {
  return baseService.get("/member/memberpaymentmethods/" + id);
};

// 获取支付卡详情
const getErrorInfo = async (id: number) => {
  return baseService.get("/order/fundthirdnotifylog/page", { page: 1, limit: 10, platformOrderId: id });
};

// 获取卡信息
const cellPaymentHoverHandle = async (row: any) => {
  if (row.paymentMethodDetail) {
    row.visible = true;
    return;
  }
  let { code, data } = await getPaymentInfo(row.memberPaymentMethodId);
  if (code === 0) {
    row.paymentMethodDetail = data.jsonData;
  }
};

// 获取错误信息
const cellErrorHoverHandle = async (row: any) => {
  if (!row.id) return;
  if (row.errMsg) {
    row.visible2 = true;
    return;
  }
  let { code, data } = await getErrorInfo(row.id);
  if (code === 0 && data.list.length) {
    row.errMsg2 = data.list[0].msg;
    row.errMsg = data.list[0].content;
  }
};

defineExpose({
  init
});
</script>

<style lang="scss" scoped></style>
